<template>
  <div id="nav">
    <!-- 导航 -->
    <!-- 搜索 -->
    <inputgoods></inputgoods>
    <!-- 轮播 -->
    <div class="swiper-container banner" ref="slider">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in swiper" :key="item.goods_id">
          <img @click="godetail(item.goods_id)" :src="item.image_src" />
        </div>
      </div>
    </div>
    <!-- 导航列表 -->
    <div class="navlist">
      <!-- <router-link to=""></router-link> -->
      <img
        v-for="item in navlist"
        :key="item.id"
        :src="item.image_src"
        alt=""
        @click="allgoodslist(item.navigator_url)"
      />
    </div>
    <!-- 楼层商品 -->
    <div class="floordata">
      <div class="list" v-for="item in floorlist" :key="item.floor_title.name">
        <img :src="item.floor_title.image_src" alt="" />
        <div class="item">
          <img
            @click="gogoodslist(n.navigator_url)"
            v-for="n in item.product_list"
            :key="n.name"
            :src="n.image_src"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.css";
import { swiperdata, catitems, floordata } from "../request/goods/index";
import Navlist from "./navlist.vue";
import Inputgoods from "./inputgoods.vue";
export default {
  name: "VueIndex",
  components: { Navlist, Inputgoods },
  data() {
    return {
      swiper: [],
      navlist: [],
      floorlist: [],
    };
  },
  created() {
   
  },
  mounted() {
    //轮播
    this.async();
    //导航列表
    catitems()
      .then((res) => {
        this.navlist = res.message;
      })
      .catch((err) => {});
    //楼层
    floordata()
      .then((res) => {
        this.floorlist = res.message;
      })
      .catch((err) => {});
  },

  methods: {
    //解决异步问题
    async async() {
      await swiperdata()
        .then((res) => {
          this.swiper = res.message;
        })
        .catch((err) => {});
      this.initswiper();
    },
    initswiper() {
      new Swiper(".swiper-container", {
        loop: true,
        // 自动轮播
        autoplay: {
          delay: 3000, // 时间间隔
          disableOnInteraction: false, // 用户操作之后是否停止轮播
        },
      });
    },
    //跳转详情
    godetail(id) {
      this.$router.push({
        path: "/detail",
        query: { id: id },
      });
    },
    //跳转列表
    gogoodslist(url) {
      this.$router.push({
        path: "/goodslist",
        query: { url: url },
      });
    },
    //跳转所有商品
    allgoodslist(url) {
      if (url) {
        this.$router.push({
          path: "/allgoodslist",
        });
      }
    },
  },
};
</script>

<style  scoped>
#nav {
  width: 1200px;
  margin: auto;
  padding-bottom: 100px;
}

.swiper-container {
  width: 100%;
  padding: 0 ;
}

.swiper-slide img {
  width: 100%;
  user-select: none;
}

.swiper-slide {
  text-align: center;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.navlist {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.floordata .list {
  margin-top: 20px;
}
.floordata .item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.floordata .item img {
  width: 200px;
  height: 200px;
}
</style>